import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:zootix/screens/home/zt_park_title/zt_park_title.dart';
import 'package:zootix/services/zt_service.dart';
import 'package:zootix/util/zt_screen_adaper_util.dart';
import 'package:zootix/zt_app_theme.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:zootix/constants/zt_router.dart';

class HomePage extends StatefulWidget {
  bool isInsideContainer = false;
  bool isContainerPressed = false;
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey _containerKey = GlobalKey();

  @override
  void initState() {
    ZtAppInfoService.to.requestPermission();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _buildBody();
  }

  Widget _buildBody() {
    double topBannerHeight = 150;
    return SingleChildScrollView(
      child: Column(mainAxisSize: MainAxisSize.min, children: [
        Stack(
          alignment: Alignment.bottomCenter,
          children: [
            const Image(
                fit: BoxFit.fitHeight,
                image: AssetImage('assets/images/zt_home_bg.png')),
            Positioned(
                top: 0,
                child: Image(
                  image: const AssetImage('assets/images/zt_top_title.png'),
                  height: topBannerHeight,
                )),
            Positioned(
              top: ZtScreenAdaper.height(topBannerHeight - 50),
              right: 0,
              height: ZtScreenAdaper.height(topBannerHeight - 50),
              child: const Image(
                  image: AssetImage('assets/images/zt_home_lion.png')),
            ),
            Positioned(
                top: topBannerHeight - ZtScreenAdaper.height(70),
                child: _buildBanner()),
            _buildParkTitle(
                top: ZtScreenAdaper.height(topBannerHeight + 60),
                left: 60,
                title: 'Elephant'),
            _buildParkTitle(
                top: ZtScreenAdaper.height(topBannerHeight + 220),
                left: 30,
                title: 'Deer'),
            _buildParkTitle(
                top: ZtScreenAdaper.height(topBannerHeight + 370),
                left: 200,
                title: 'Raccoon'),
            _buildParkTitle(
                top: ZtScreenAdaper.height(topBannerHeight + 530),
                left: 160,
                title: 'Swan'),
            _buildParkTitle(
                top: ZtScreenAdaper.height(topBannerHeight + 630),
                left: 10,
                title: 'Squirrel'),
            _buildParkTitle(
                top: ZtScreenAdaper.height(topBannerHeight + 780),
                left: 110,
                title: 'Stay tuned!'),
          ],
        ),
      ]),
    );
  }

  Widget _buildBanner() {
    List<String> titles = [
      'Welcome to the zoo.',
      'Buying tickets online is super easy!',
      'Show me your ticket number.',
      'Phu Quoc Island SAFARI Safari Voucher.',
      'Have an unforgettable trip to the Vietnam Zoo!'
    ];
    return Container(
        height: ZtScreenAdaper.height(50),
        width: ZtScreenAdaper.width(200),
        padding: EdgeInsets.symmetric(horizontal: ZtScreenAdaper.width(5)),
        alignment: Alignment.center,
        child: Swiper(
          duration: 3000,
          axisDirection: AxisDirection.down,
          scrollDirection: Axis.vertical,
          itemBuilder: (context, index) {
            return Text(
              titles[index],
              maxLines: 2,
              style: TextStyle(
                  color: ZtAppTheme.white,
                  fontWeight: FontWeight.bold,
                  fontSize: ZtScreenAdaper.sp(15)),
            );
          },
          indicatorLayout: PageIndicatorLayout.COLOR,
          autoplay: true,
          itemCount: titles.length,
        ));
  }

  Widget _buildParkTitle(
      {required double top, required double left, required String title}) {
    return Positioned(
      top: top,
      left: left,
      child: ZtParkTitle(
          disable: title == 'Stay tuned!',
          clickCallback: () {
            Get.toNamed(ZtRouteConfig.parkDetail, arguments: {'title': title});
          },
          child: Stack(children: [
            Image(
              image: const AssetImage('assets/images/zt_home_park_title.png'),
              height: ZtScreenAdaper.height(80),
            ),
            Positioned.fill(
              child: Align(
                  alignment: Alignment.center,
                  child: Text(
                    title,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: ZtScreenAdaper.sp(18),
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.bold,
                    ),
                  )),
            ),
            Positioned.fill(
              child: Align(
                alignment: Alignment.center,
                child: Text(
                  title,
                  style: TextStyle(
                      fontSize: ZtScreenAdaper.sp(18),
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.bold,
                      foreground: Paint()
                        ..style = PaintingStyle.stroke
                        ..strokeWidth = 1
                        ..color = const Color(0xFF246316).withOpacity(0.8)),
                ),
              ),
            )
          ])),
    );
  }
}
